<template>
    <div class="login_container">
        <el-row class="login_main" align="middle">
            <el-col :span="12" :xs="0" align="middle"></el-col>
            <el-col :span="12" :xs="24" align="middle">
                <el-form ref="login_form_el" :rules="rules" :model="formData" class="login_form">
                    <h1>Hello</h1>
                    <h2>欢迎来到游数视界</h2>
                    <div style="padding: 0 20px">
                        <el-form-item prop="username">
                            <el-input v-model="formData.username" :prefix-icon="User" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="formData.password" type="password" show-password :prefix-icon="Lock"
                                placeholder="请输入密码" />
                        </el-form-item>
                        <el-form-item prop="isAgree">
                            <el-checkbox v-model="formData.isAgree" style="color: #fff;"
                                :disabled="!deal">用户平台使用协议</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="login_btn" type="primary" @click="login">登录</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-col>
        </el-row>

        <el-dialog v-model="centerDialogVisible" title="登录之前，您必须先要同意平台使用协议" width="500" center
            :close-on-click-modal="false" :show-close="false">
            <span>
                <p>本网站使用了百度地图API，仅用于个人使用目的。</p>
                <p>百度地图API相关版权归百度公司所有，遵循<a href="https://lbsyun.baidu.com/index.php?title=open/law"
                        target="_blank">百度地图API使用条款</a>。</p>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button disabled>取消</el-button>
                    <el-button type="primary" @click="changeCenterDialogVisible">
                        同意
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
// 引入图标
import { User, Lock } from '@element-plus/icons-vue'
// 引入user仓库
import { useUserStore } from '@/stores/modules/user'
const useUser = useUserStore()
// 校验 提示
import { type FormRules, ElMessage } from 'element-plus'
// 路由
import { useRouter } from 'vue-router';
const router = useRouter()

let deal = ref(false)
const centerDialogVisible = ref(true)

const changeCenterDialogVisible = () => {
    centerDialogVisible.value = false
    deal.value = true
}

// 登录数据
const formData = reactive({
    username: 'admin',
    password: '111111',
    isAgree: false
})

// 自定义校验规则
const agreeRules = (rule: any, value: any, callback: any) => {
    value ? callback() : callback(new Error('请勾选协议框'))
}

// 校验规则
const rules = reactive<FormRules<typeof formData>>({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 12, message: '密码长度在6~12位', trigger: 'blur' }
    ],
    isAgree: [{ validator: agreeRules, trigger: 'blur' }]
})

// 获取表单元素DOM节点
const login_form_el = ref()

// 登录事件
const login = () => {
    // 统一校验
    login_form_el.value.validate(async (valid: any) => {
        if (valid) {
            // const res: any = await useUser.userLogin(formData)
            // if (res === '密码错误' || !res) return ElMessage({ type: 'error', message: '登录出错' })
            // // 获取用户信息
            // ElMessage({ type: 'success', message: '登录成功' })
            // await useUser.getUserInfo()
            // setTimeout(() => {
            //     router.push('/')
            // }, 1500);
            let obj = {
                token: '登录成功',
                userinfo: {
                     name: '', 
                     avatar: ''
                }
            }
            localStorage.setItem('user',JSON.stringify(obj))
            ElMessage({ type: 'success', message: '登录成功' })
            setTimeout(() => {
                router.push('/')
            }, 1500);
        }
    })
}

</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background-image: url('../../assets/images/bj.png');
    // background-image: url('../../assets/images/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;

    .login_main {
        height: 100%;

        .login_form {
            width: 80%;

            &>h1,
            h2 {
                color: #2a71df;
                font-size: 40px;
                text-align: left;
            }

            &>h2 {
                font-size: 20px;
                margin: 20px 0;
            }

            .login_btn {
                width: 100%;
            }
        }
    }
}
</style>
